<template>
	<view class="wrap">
		<!-- <view class="top flex flex-between">
			<view class="lt">如果不选择城市，默认当前城市</view>
			<view class="rt"><text>选择车辆信息</text>></view>
		</view> -->
		<view class="box-wrapper">
			<view class="box">
				<!-- <view class="info-list flex flex-between flex-v-center">
					<view class="lt flex flex-h-start flex-v-center">
						<label for=""> 选择城市：</label>
						<view class="flex flex-h-start flex-v-center">
							<image src="../static/image/015.png" mode=""></image>
							<text>郑州</text>
						</view>
					</view>
					<view class="rt">
						<text>切换城市</text>
					</view>
				</view> -->
				<view class="car-type-wrapper flex flex-between flex-v-center">
					<view class="car-type flex flex-h-start flex-v-center">
						<label for=""> 号牌种类：</label>
						<text @click="doen">{{carType}}</text>
					</view>
				</view>
				<view class="car-wrapper">
					<view class="car flex flex-h-start flex-v-center">
						<label for="">车牌号码:</label>
						<!-- <button @click="sel">{{area}}^</button> -->
						<input type="text" @click="done" v-model="lsnum"  placeholder="请输入车牌号"
							placeholder-style="font-family: HiraginoSansGB-W3;font-size: 30rpx;color: #999;" disabled/>
					</view>
				</view>
				<view class="auto-list flex flex-h-start flex-v-center">
					<label for=""> 发动机号：</label>
					<input type="text" v-model="engineno" placeholder="请填写发动机号后 6 位">
				</view>
				<view class="auto-list flex flex-h-start flex-v-center">
					<label for=""> 车架号码：</label>
					<input type="text" v-model="frameno" placeholder="请填写车架号码">
				</view>
				<view class="code flex flex-between flex-v-center">
					<view class="lt flex flex-h-start flex-v-center">
						<label for=""> 验证号码：</label>
						<view>
							<input type="text" v-model="code" placeholder="请输入验证码" />
						</view>
					</view>
					<view class="rt">
						<button :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
					</view>
				</view>
			</view>
		</view>
		<view class="sub">
			<text @click="sub">保存并查询</text>
		</view>
		<view class="tips flex flex-h-center">
			保存信息后，下次直接选择查询。
		</view>
		<u-select v-model="type" :list="typeList"  @confirm="confirms"></u-select>
		<!-- <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select> -->
		<u-keyboard ref="uKeyboard" mode="car" v-model="show" @change="valChange" @backspace="backspace"></u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				// area: '北京',
				// list: [{
				// 		value: '1',
				// 		label: '京'
				// 	},
				// 	{
				// 		value: '2',
				// 		label: '津'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '冀'
				// 	},
				// 	{
				// 		value: '4',
				// 		label: '黑'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '吉'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '辽'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '鲁'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '内'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '甘'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '宁'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '青'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '藏'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '陕'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '晋'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '豫'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '鄂'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '湘'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '皖'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '赣'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '苏'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '沪'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '闽'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '粤'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '桂'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '琼'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '云'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '黔'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '川'
				// 	},

				// 	{
				// 		value: '3',
				// 		label: '渝'
				// 	},
				// 	{
				// 		value: '3',
				// 		label: '疆'
				// 	}
				// ],
				url: "",
				mobile: '',
			    // area: "京",
				type: false,
				typeList: [{
						value: '01',
						label: '大型车'
					},
					{
						value: '02',
						label: '小型车'
					}
				],
				carType: '请选择车牌类型',
				lsnum: '',
				code: '',
				btnDis: false, // 发送验证码按钮不禁用
				btnText: "发送验证码", // 提示
				engineno: "",
				frameno: '',
				lsprefix: '',
				lstype: ""
			}
		},
		onShow() {
			// this.getType();
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.url = curRoute;
			this.mobile = uni.getStorageSync("mobile");
			console.log(this.mobile);
		},
		methods: {
			sel() {
				this.show = true;
			},
			doen() {
				this.type = true;
			},
			done() {
				this.show = true;
			},
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.lsnum += val;
				console.log(this.lsnum);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.lsnum.length) this.lsnum = this.lsnum.substr(0, this.lsnum.length - 1);
				console.log(this.lsnum);
			},
			// getType() {
			// 	this.$https.request('/cli/js/carType', true, {}).then((res) => {
			// 		if (res.code == 0) {
			// 			this.typeList = res.result;

			// 		} else if (res.code == '201') {
			// 			this.LoadingMsg("请先登录");
			// 			setTimeout(function() {
			// 				uni.hideLoading();
			// 				uni.navigateTo({
			// 					url: "./login/login"
			// 				})
			// 			}, 1000)

			// 			uni.setStorageSync('url', this.url);
			// 		} else {
			// 			this.LoadingMsg(res.msg);
			// 			setTimeout(function() {
			// 				uni.hideLoading();
			// 			}, 1000)
			// 		}

			// 	})
			// },
			confirms(e) {
				this.carType = e[0].label;
				this.lstype = e[0].value;
			},
			confirm(e) {
				this.area = e[0].label;
			},
			sendCode() {

				this.$https.request('/cli/sendCode', false, {
					mobile: this.mobile,
				}).then((res) => {
					if (res.code == 0) {
						this.LoadingMsg('发送成功');
						setTimeout(() => {
							uni.hideLoading();
							this.countDown();
						}, 1500);
					} else {
						this.LoadingMsg(res.msg);
						setTimeout(() => {
							uni.hideLoading();
						}, 1000);
					}
				})
			},
			// 验证码倒计时
			countDown() {
				// 初始化定时器
				let t = null;
				// 倒计时1分钟
				let timer = 60;
				// 按钮禁用
				this.btnDis = true;
				// 计时器清零
				clearInterval(t);
				// 按钮显示时间
				this.btnText = `${timer}s`;
				t = setInterval(() => {
					// 当倒计时完时，显示重新发送,按钮开启
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					// 实现倒计时效果
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
			sub() {
				if (this.carType == '请选择车牌类型') {
					this.toastMsg("请选择车牌类型");
					return;
					// return;
				}
				if (this.area == '') {
					this.toastMsg("请选择车牌所在省或市简称");
					return;
				}

				if (this.lsnum == '') {
					this.toastMsg("请输入车牌所在省或市简称的剩余车牌号");
					return;
				}
				if (this.engineno == '') {
					this.toastMsg("请输入发动机号");
					return;
				}
				if (this.frameno == '') {
					this.toastMsg("请输入车架号");
					return;
				}
				// if (this.code == '') {
				// 	this.toastMsg("请输入短信验证码");
				// 	return;
				// }
				this.$https.request('/cli/js/carQuery', true, {
					lstype: this.lstype,
					engineno: this.engineno,
					frameno: this.frameno,
					lsprefix: this.area,
					lsnum: this.lsnum,
					code: this.code,
				}).then((res) => {
					if (res.code == 0) {
						
						let obj = res.result.lists;
						let item = encodeURIComponent(JSON.stringify(obj))
						uni.navigateTo({
							url: "./results?item=" + item+"&carType="+this.carType+"&lsnum="+this.lsnum
						})
					} else if (res.code == '201') {
						this.LoadingMsg("请先登录");
						setTimeout(function() {
							uni.hideLoading();
							uni.navigateTo({
								url: "./login/login"
							})
						}, 1000)

						uni.setStorageSync('url', this.url);
					} else {
						this.LoadingMsg(res.msg);
						setTimeout(function() {
							uni.hideLoading();
						}, 1000)
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		.tips {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			font-family: HiraginoSansGB-W3;
			font-size: 26rpx;
			color: #333;
		}

		.sub {
			padding: 80rpx 40rpx;

			text {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				font-family: HiraginoSansGB-W3;
				font-size: 26rpx;
				color: #fff;
				border-radius: 50rpx;
				border: 2rpx solid #999;
				height: 80rpx;
				background-color: #4A81FF;
			}
		}

		.box-wrapper {
			padding: 40rpx;

			.box {
				// box-shadow: #999 0rpx 0rpx 20rpx;
				border-radius: 10rpx;

				.car-type-wrapper {
					padding: 0 40rpx;
					border-bottom: 1rpx solid #F5F5F5;

					.car-type {
						height: 120rpx;
						width: 100%;

						label {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							width: 150rpx;
							font-family: HiraginoSansGB-W3;
							font-size: 26rpx;
							color: #333;
						}

						text {
							display: flex;
							align-items: center;
							width: calc(100% - 160rpx);
							font-family: HiraginoSansGB-W3;
							font-size: 26rpx;
							color: #333;
						}
					}
				}

				.auto-list {
					height: 120rpx;
					padding: 0 40rpx;

					border-bottom: 1rpx solid #F5F5F5 ;
					label {
						display: flex;
						justify-content: flex-start;
						width: 150rpx;
						font-family: HiraginoSansGB-W3;
						font-size: 26rpx;
						color: #333;
					}

					input {
						height: 100%;
						width: calc(100% - 150rpx);
					}
				}

				.car-wrapper {
					padding: 0 40rpx;
					border-bottom: 1rpx solid #F5F5F5;

					.car {
						height: 120rpx;
						border-radius: 10rpx;

						label {
							display: flex;
							justify-content: flex-start;
							width: 150rpx;
							font-family: HiraginoSansGB-W3;
							font-size: 26rpx;
							color: #333;
						}

						button {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 150rpx;
							font-family: HiraginoSansGB-W3;
							font-size: 30rpx;
							color: #333;
							border: none;
							outline: none;
							padding: 0;
						}

						button::after {
							border: none;
						}

						input {
							padding-left: 20rpx;
						}
					}
				}

				.info-list {
					padding: 0 40rpx;
					border-bottom: 1rpx solid #F5F5F5;
					height: 120rpx;

					.lt {
						label {
							display: flex;
							justify-content: flex-start;
							width: 150rpx;
							font-family: HiraginoSansGB-W3;
							font-size: 26rpx;
							color: #333;
						}

						view {
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

					.rt {
						text {
							display: flex;
							justify-content: flex-end;
							width: 120rpx;
							text-align: right;
							font-family: HiraginoSansGB-W3;
							font-size: 26rpx;
							color: #333;
						}
					}
				}

				.code {
					padding: 0 40rpx;
					border-bottom: 1rpx solid #F5F5F5;
					height: 120rpx;

					.lt {
						label {
							display: flex;
							justify-content: flex-start;
							width: 150rpx;
							font-family: HiraginoSansGB-W3;
							font-size: 26rpx;
							color: #333;
						}

						view {
							width: calc(100% - 150rpx);

							input {
								width: 100%;
								height: 120rpx;
							}
						}
					}

					.rt {
						button {
							width: 150rpx;
							background-color: transparent;
							font-family: HiraginoSansGB-W3;
							font-size: 24rpx;
							color: #333;
							border-radius: 10rpx;
							border: 2rpx solid #999;
							height: 60rpx;
							padding: 0;
						}
					}
				}
			}
		}

		.top {
			padding: 30rpx 40rpx;

			.lt {
				font-family: HiraginoSansGB-W3;
				font-size: 26rpx;
				color: #333;
			}

			.rt {
				font-family: HiraginoSansGB-W3;
				font-size: 26rpx;
				color: #333;

				text {
					font-family: HiraginoSansGB-W3;
					font-size: 26rpx;

					color: #0040FF;
				}
			}
		}
	}
</style>
